﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <script src="lib/jslinq-min.js"></script>
</head>
<body>
    <div id="tree-container" style="border: 0; overflow:auto; height: auto; width:auto;" >
        
    </div>
    <script>

        var height = 300, width = 400, radius = Math.max(width  / 15, 25), Linq = window.Q;

        var colormap = { 0: ['#0a7dbd', '#003680'], 1: ['#2CADF3', '#0a7dbd'], 2: ['#76c6ab', '#2e896a'], 3: ['#0a7dbd', '#003680'], 4: ['#0a7dbd', '#003680'] };

        //Define Items
        var data = {
                
                items: [
                        { id: 1, text: 'Root' },
                        { id: 2, text: 'Test 2', parent: 1 },
                        { id: 3, text: 'Test 3', parent: 1 },
                        { id: 4, text: 'Test 4', parent: 1 },
                        { id: 5, text: 'Test 5', parent: 1 },
                        { id: 6, text: 'Test 6', parent: 1 },
                        { id: 7, text: 'Test 7', parent: 1 }
                ]
        };

        var linqItems = Linq(data.items);
        
        //Create Canvas
        var canvas = document.createElement("canvas");
        canvas.id = "canvas-root";
        canvas.height = height;
        canvas.width = width;
        
        document.getElementById('tree-container').appendChild(canvas);
        
        //Get Root And draw
        var firstItem = linqItems.select(
                                            function (v) { return !v.parent; },
                                            function (v) { return v; }
                                         ).first();

        firstItem.x = (width / 2) - (radius) + 5;
        firstItem.y = (radius) + 5;

        var level1 = linqItems.select(
                                            function (v) { return v.parent == firstItem.id; },
                                            function (v) { return v; }
                                         ).ToArray();
        
        //FInd no.of items to render
        var noOfItems = Math.floor((width - radius) / (radius + 5));
        noOfItems = Math.min(noOfItems, level1.length);

        var idx = 1;
        for (var i = (Math.PI / noOfItems); i <= (Math.PI) && idx < noOfItems; (i = i + (Math.PI / noOfItems))) {

            var left = ((Math.cos(i) * ((width - radius) / 2)) + ((width - radius) / 2));
            var _top = (Math.sin(i) * (2 * radius)) + (2 * radius);

            level1[idx - 1].x = left;
            level1[idx - 1].y = _top;
            ++idx;
        }
        
        //Draw
        var context = document.getElementById("canvas-root").getContext('2d');
        for (var index = 0 ; index < data.items.length; index++) {
            if (!data.items[0].x)
                continue;

            //Draw connector
            context.beginPath();
            context.moveTo(data.items[0].x, data.items[0].y);
            context.lineTo(data.items[index].x, data.items[index].y);
            context.stroke();

            //Draw Item
            context.beginPath();
            context.arc(data.items[index].x, data.items[index].y, radius, 0, 2 * Math.PI, false);

            var grd = context.createRadialGradient(data.items[index].x, data.items[index].y, 0, data.items[index].x, data.items[index].y, radius);

            if (index == 0) {
                grd.addColorStop(0, "#0a7dbd");
                grd.addColorStop(1, "#003680"); //"#003680")
            }
            else {
                grd.addColorStop(0, colormap[1][0]);
                grd.addColorStop(1, colormap[1][1]);
            }

            context.fillStyle = grd; //data.items[index].id == 1 ? 'green' : '#48c1e9';
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = '#003680';
            context.stroke();

            context.beginPath();
            context.fillStyle = "#fff";
            context.font = "12px Arial";
            context.fillText(data.items[index].text, data.items[index].x - (radius / 2), data.items[index].y);
            context.stroke();
        }

    </script>
</body>
</html>
